import React from 'react'
import { Col, Form, Input, Modal, Row, Radio, Button, Tabs, Badge, Switch, message } from 'antd'
import { Loader } from 'components'
import lodash from 'lodash'
import styles from './index.less'

const TabPane = Tabs.TabPane
const PrivilegesModal = ({
  dispatch,
  form: {
    getFieldDecorator,
    validateFields,
    setFieldsValue,
  },
  visible,
  item,
  privileges,
  loading
}) => {

  const confirmUpdateModal = (privilege) => {
    let _items = lodash.cloneDeep(privilege.items);
    let _hasEmptyField = false;
    let _temp = _items.map((val) => {
      if(!val.value || val.value.length == 0){
        _hasEmptyField = true;
      }
      return {
        "displayName":val.displayName,
        "code":val.code,
        "value":val.value,
        "unit":val.unit,
        "memo":val.memo
      }
    })
    console.log(_temp)
    if(_hasEmptyField){
      message.error("请将数据填写完整后提交");
      return;
    }
    dispatch({
      type: 'grades/updateLevelPrivilege',
      params: {
        id: privilege.targetId,
        data: JSON.stringify({
          items: _temp
        })
      }
    })
  }

  const confirmAddModal = (privilege) => {
    let _items = lodash.cloneDeep(privilege.items);
    let _hasEmptyField = false;
    let _temp = _items.map((val) => {
      if(!val.value || val.value.length == 0){
        _hasEmptyField = true;
      }
      return {
        "displayName":val.displayName,
        "code":val.code,
        "value":val.value,
        "unit":val.unit,
        "memo":val.memo
      }
    })
    console.log(_temp)
    if(_hasEmptyField){
      message.error("请将数据填写完整后提交");
      return;
    }
    dispatch({
      type: 'grades/addLevelPrivilege',
      params: {
        levelItemId: item.id,
        privilegeId: privilege.id,
        data: JSON.stringify({
          items: _temp
        })
      }
    })
  }


const confirmRemoveModal = (privilege) => {
    dispatch({
      type: 'grades/removeLevelPrivilege',
      params: {
        id: privilege.targetId
      }
    })
  }

  const hideEditModal = () => {
    dispatch({
      type: 'grades/togglePrivilegesModalVisible',
      privilegesModalVisible: false
    })
  }

  const onChangeTab = (e) => {
    console.log(e)
  }

  const changeField = (value, index1, index2, field) => {
    privileges[index1].items[index2][field] = value;
    dispatch({
      type: 'grades/setPrivileges',
      privileges
    })
  }

  const toggle = (e, privilege) => {
    if(e){
      confirmAddModal(privilege);
      return;
    }
    if(!e){
      confirmRemoveModal(privilege);
      return;
    }
  }
  return (
    <Modal 
      visible={visible} 
      width={600} 
      title={"特权设置"} 
      className={styles.privilegesModal} 
      onCancel={() => { hideEditModal(false, {}) }}
      footer={null}>
      <Tabs
        defaultActiveKey="1"
        tabPosition="left"
        style={{ height: 250 }}
        onChange={onChangeTab}        
      >
        {privileges.map((privilege, index1) => (
          <TabPane tab={<span>{privilege.targetId ? <Badge offset={[-4, -8]} dot/> : null}{privilege.name}</span>} key={index1+1}>
            <div className={styles.box}>
              <div className={styles.form}>
                {
                  privilege.items && privilege.items.map((val, index2) => {
                    return(
                      <div key={index1+'-'+index2} className={styles.item}>
                        <Row>
                          <Col span={10} align="right" className={styles.name}>
                            {val.displayName}：
                          </Col>
                          <Col span={14}>
                            <Input value={val.value} onChange={(e) => changeField(e.target.value, index1, index2, 'value')} addonAfter={val.unit}/>
                          </Col>
                        </Row>
                        <Row>
                          <Col span={10}>
                          </Col>
                          <Col span={14} className={styles.tip}>
                            {val.memo}
                          </Col>
                        </Row>
                      </div>
                    )
                  })
                }
                <div className={styles.line}></div>
                <div className={styles.btn}>
                  <Switch onChange={(e) => toggle(e, privilege)} checked={privilege.targetId ? true : false} checkedChildren="启用" unCheckedChildren="禁用" style={{float: 'left'}}/>
                  {privilege.targetId ? <Button key="update" type="primary" size="small"  onClick={() => { confirmUpdateModal(privilege) }}>更新</Button> : null}
                </div>
              </div>
              
            </div>            
          </TabPane>
        ))}
      </Tabs>
      <Loader spinning={loading.effects['grades/queryLevelPrivileges']} />
      <Loader spinning={loading.effects['grades/updateLevelPrivilege']} />
      <Loader spinning={loading.effects['grades/addLevelPrivilege']} />
      <Loader spinning={loading.effects['grades/removeLevelPrivilege']} />
    </Modal>
  )

}

export default Form.create()(PrivilegesModal)